<template>
  <view class="container">
    <view class="content">
      <view class="section-title">任务列表</view>
      <scroll-view class="card-container" scroll-y="true" refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
        <view class="card" v-for="(item, index) in taskList" :key="index" @click="goToDetail(item)">
          <view class="card-header">
            <view class="card-title">任务: {{ item.title }}</view>
            <view class="card-project">所属项目: {{ item.projectId }}</view>
          </view>
          <view class="card-info">
            <view class="info-row">
              <view class="label">优先级:</view>
              <view class="value priority"><dict-type typeName="task_priority" :value="item.priority"/></view>
            </view>
            <view class="info-row">
              <view class="label">状态:</view>
              <view class="value status"><dict-type typeName="task_status" :value="item.status"/></view>
            </view>
            <view class="info-row">
              <view class="label">开始日期:</view>
              <view class="value">{{ formatDate(item.startDate) }}</view>
            </view>
            <view class="info-row">
              <view class="label">截止日期:</view>
              <view class="value">{{ formatDate(item.dueDate) }}</view>
            </view>
            <view class="info-row">
              <view class="label">创建时间:</view>
              <view class="value">{{ formatDate(item.createdAt) }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { listMyAllTask } from '@/api/project/task';
import DictType from "../components/dictType/dictType.vue";

export default {
  components: {DictType},
  data() {
    return {
      taskList: [],
      isRefreshing: false
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    async getData() {
      const taskRes = await listMyAllTask({});
      this.taskList = taskRes.data;
      this.isRefreshing = false;
    },
    async onRefresh() {
      this.isRefreshing = true;
      await this.getData();
    },
    formatDate(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    goToDetail(task) {
      uni.navigateTo({
        url: `/pages/project/taskInit/index?taskId=${task.id}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.content {
  display: flex;
  flex-direction: column;
  padding-bottom: 20rpx;
}

.section-title {
  margin-top: 100rpx;
  font-size: 34rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16rpx;
  color: #333;
}

.card-container {
  max-height: calc(100vh - 200rpx);
  overflow-y: auto;
}

.card {
  background: #fff;
  border-radius: 12rpx;
  padding: 16rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 16rpx;
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
}

.card-project {
  font-size: 26rpx;
  color: #888;
}

.card-info {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 28rpx;
  color: #333;
}

.priority {
  font-weight: bold;
}

.status {
  font-weight: bold;
}
</style>
